<template>
  <section id="ex-result-page">
    <article class="top">
     <w-row>
        <w-cell direction="column" align="center">
             <p style="text-align: center;margin-bottom: -1rem;"><img class="userImg" :src='HeadImg'/></p>
             <p class="name">姓名：{{Name}}</p>
             <p class="level">{{LevelName}}</p>
        </w-cell>
     </w-row>
    </article>
    <section class="record-msg">
        <article class="center" style="margin-top: 2rem;">
        <w-row v-if="Level<4">
                <w-cell class="left reward">
                   <div :style="{backgroundImage: 'url('+backgroundLeftDiv+')'}" class="reward">
                    <span class="source">{{Integral}}分</span>
                    </div>
                </w-cell>
            
                <w-cell class="arrow"></w-cell>
        
                <w-cell class="right reward">
                     <div :style="{backgroundImage: 'url('+backgroundRightDiv+')'}" class="reward">
                       <span class="source">{{nextLevel}}分</span>
                     </div>
                </w-cell>
        </w-row>
        </article>
        <article class="bottom">
            <p>恭喜您，成为{{LevelName}}啦！</p>
        </article>
         <article class="bottom" v-if="Level<4">
            <p>努力加油哦，你距离{{NextLevelName}}只差{{lastSource}}积分啦！</p>
        </article>
    </section>
  </section>
</template>

<script>
    //let user = JSON.parse(localStorage.getItem('userMsg'));
    import { mapGetters, mapActions } from 'vuex';
    import exres from '../../static/ex-post';
    export default {
        name: 'exresult',
        data() {
            return {
                Name:'',
                HeadImg: '',
                Integral: '',
                LevelName: '',
                Level: 0,
                NextLevelName: '',
                lastSource: 0,
                backgroundLeftDiv: '',
                backgroundRightDiv: ''
             }
        },
        mounted() {
            this.checkUserInfo(this.$router.history.current.params.openid).then((res)=> {
                 let _res = res[0].userInfo;
                 this.Name = _res.Name;
                 this.HeadImg = _res.HeadImg;
                 this.Integral = _res.Integral;
                 if(this.Integral>= 0 && this.Integral<=100) {
                    this.LevelName = "麻醉新手";
                    this.NextLevelName = "麻醉能手";
                    this.Level = 0;
                    this.backgroundLeftDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-1.png";
                    this.backgroundRightDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-2.png";
                    this.nextLevel = 101;
                    this.lastSource = 101 - this.Integral;
                 } else if(this.Integral> 100 && this.Integral<=500) {
                    this.LevelName = "麻醉能手";
                    this.NextLevelName = "麻醉达人";
                    this.Level = 1;
                    this.backgroundLeftDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-2.png";
                    this.backgroundRightDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-3.png";
                    this.nextLevel = 501;
                    this.lastSource =501 - this.Integral;
                 } else if(this.Integral> 500 && this.Integral<=1000) {
                    this.LevelName = "麻醉达人";
                    this.NextLevelName = "麻醉专家";
                    this.Level = 2;
                    this.backgroundLeftDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-3.png";
                    this.backgroundRightDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-4.png";
                    this.nextLevel = 1001;
                    this.lastSource = 1001 - this.Integral;
                 } else if(this.Integral> 1001 && this.Integral<=2000) {
                    this.LevelName = "麻醉专家";
                    this.NextLevelName = "麻醉大师";
                    this.Level = 3;
                    this.backgroundLeftDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-4.png";
                    this.backgroundRightDiv = "http://zqdn.aegis-s.com/h5/static/img/lv-5.png";
                    this.nextLevel = 2001;
                    this.lastSource = 2000 - this.Integral;
                 } else {
                    this.LevelName = "麻醉大师";
                    this.Level = 4;
                 }
            })
        },
        methods: {
            ...mapActions([
                'checkUserInfo'
            ])
        }
        
}
</script>

<style lang="scss" scoped>
  #ex-result-page {
      .top {
          width: 18.75rem;
          background: url('../../assets/img/ex/banner.png') center no-repeat;
          background-size: 100% auto;
          padding: 1rem 0 1rem 0;
          img {
              width: 60%;
          }
          .name {
              background: url('../../assets/img/ex/name-bg.png') center no-repeat;
              color: #fff;
              padding: 1rem;
              background-size: 100% auto;
          }
          .level {
              color: #005ba8;
              font-weight: bold;
          }
      }
      .center {
          .left {
            //   width: 6rem;
            //   height: 10rem;
              //background: url('../../assets/img/ex/reward-left.png') center no-repeat;
            //   background-size: 100% auto;
            //   position: relative;
          }
          .reward {
              width: 8rem;
              height: 10rem;
              background-size: 100% auto;
              position: relative;
              background-repeat: no-repeat;
              flex: 2;
              text-align: center;
          }
          .right {
            //   width: 7rem;
            //   height: 10rem;
              //background: url('../../assets/img/ex/reward1.png') center no-repeat;
            //   background-size: 100% auto;
            //   position: relative;
          }
          .arrow {
              background: url('../../assets/img/ex/arrow.png') center no-repeat;
              background-size: 90% auto;
          }
          .source {
                display: inline-block;
                position: absolute;
                bottom: 1.6rem;
                font-size: 0.7rem;
                width: 100%;
                left: 0;
          }
      }
      .bottom {
          text-align: center;
          font-size: 0.9rem;
      }
      .record-msg {
          display: flex;
          flex-direction: column;
          height: 16rem;
          justify-content: space-around;
          width: 95%;
          margin: 0 auto;
      }
      .userImg {
        border-radius: 50px;
      }
  }
</style>